<!--部门选择组件-->
<template>
  <div class="JSelectDeptByByteluck">
    <okDepartmentSelect
      :value="value"
      :getContainerModal="getContainer"
      :multiple="multiple"
      :remoteMethod="onRemoteMethod"
      :getInfoById="onGetInfoById"
      :getRootDept="onGetRootDept"
      :getSubDept="onGetSubDept"
      :update="handleSelectChange"
      v-bind="$attrs"
      :theme="appTheme"
    />
  </div>
</template>
<script lang="ts" setup>
  import { propTypes } from '/@/utils/propTypes';
  import { okDepartmentSelect } from '@byteluck/ok-wc-ui';
  import { queryDepartTreeSync } from '/@/api/common/api';
  import { cloneDeep } from 'lodash-es';
  import { inject } from 'vue';

  const emit = defineEmits(['options-change', 'change', 'select', 'update:value']);
  const props = defineProps({
    value: propTypes.oneOfType([propTypes.string, propTypes.array]),
    // 是否允许多选，默认 true
    multiple: propTypes.bool.def(true),
  });
  const getContainer = () => document.body;
  const appTheme = inject('appTheme');
  async function onLoadData(params?: any) {
    const queryParams = { primaryKey: 'key', ...params };
    const list = await queryDepartTreeSync(queryParams);
    return list;
  }

  async function onGetInfoById() {
    const ids = props.value;
    const list = await onLoadData({ ids });
    const result = convertDepartmentListForResult(list);
    return result;
  }

  async function onRemoteMethod(
    query: string,
    displayLevel: string,
    appointDepTypeList: string[],
    page: { page_index: number; page_size: number },
    organizationView: string
  ) {
    const list = await onLoadData({ departName: `*${query}*` });
    const result = convertDepartmentListForResult(list);
    return result;
  }

  async function onGetRootDept() {
    const list = await onLoadData();
    const newList = list.map((item: any) => {
      return {
        org_id: item.id,
        org_name: item.departName,
        org_type: 'INTERNAL',
        org_tag_code: null,
        org_tag_name: null,
        dept_name_path: item.departName,
        has_child: item.isLeaf,
      };
    });
    return {
      data: newList,
    };
  }

  function convertDepartmentListForResult(list: any[]) {
    const newList = list.map((item: any) => {
      return {
        department_name: item.departName,
        department_id: item.id,
        parent_id: item.parentId,
        dept_level_no: null,
        dept_id_path: item.id,
        dept_name_path: item.departName,
        display_value: item.departName,
        order: null,
        has_child: false,
        org_type: null,
        label_name: null,
        org_id: item.parentId,
        has_child: !item.isLeaf,
      };
    });
    return {
      code: '000000',
      data: newList,
    };
  }

  async function onGetSubDept(parentDepartmentId: string, displayLevel: number, page: { page_index: number; page_size: number }) {
    const list = await onLoadData({ pid: parentDepartmentId });
    const result = convertDepartmentListForResult(list);
    return result;
  }

  function send(values) {
    let result = typeof props.value == 'string' ? values.join(',') : values;
    emit('update:value', result);
    emit('change', result);
    if (!values || values.length == 0) {
      emit('select', null, null);
    }
  }

  function handleSelectChange(values) {
    const value = cloneDeep(values);
    send(value);
  }
</script>
<style lang="less" scoped></style>
